<!-- 分页器 -->
<template>
    <el-pagination v-model:current-page="paginationData.currentPage" v-model:page-size="paginationData.pageSize"
        :page-sizes="[10, 20, 30, 40]" background layout="total, sizes, prev, pager, next, jumper"
        :total="paginationData.totals" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import $bus from '../../bus/'

// 当前页码
let currentPage = ref<number>(1)
// 当前页有多少条数据
let pageSize = ref<number>(10)
let keywords = ref('')

onMounted(() => {
    $bus.on('keyword', (kword: string) => {
        keywords.value = kword
    })
})

// 改变当前页 数据总数
const handleSizeChange = (pagesize: number) => {
    pageSize.value = pagesize
    $emit('getInfo', currentPage.value, pagesize, keywords.value)
}
// 当前页改变时的回调
const handleCurrentChange = (currentpage: number) => {
    currentPage.value = currentpage
    $emit('getInfo', currentpage, pageSize.value, keywords.value)

}
let $emit = defineEmits(['getInfo'])

defineProps(['paginationData'])
</script>

<style lang="scss" scoped></style>